<template>
  <Card style="height:800px">
      <p slot="title" style="color: red;font-size: large;">
        征信报告上传
      </p>
      <marvels-task-count :taskNodes="taskNodes"></marvels-task-count>
      <br>
      <Row>
        <Form method="get" :rules="ruleInline" name="exportCreditExcel" id="exportCreditExcel" enctype="multipart/form-data">

          <DatePicker type="date" v-model="formInline.startCreatedDate" name="startCreatedDate" placeholder="上报日期(起)" style="width: 200px"></DatePicker>
          <DatePicker type="date" v-model="formInline.endCreatedDate" name="endCreatedDate" placeholder="上报日期(止)" style="width: 200px;margin-left: 10px;"></DatePicker>
          <Input v-model="formInline.custName" name="custName" style="width: 200px;margin-left: 10px;" placeholder="客户姓名"></Input>
          <Input v-model="formInline.custCardNo" name="custCardNo" style="width: 200px;margin-left: 10px;" placeholder="身份证号码"></Input>
          <Input v-model="formInline.channelName" name="channelName" style="width: 200px;margin-left: 10px;" placeholder="渠道"></Input>

          <Button type="primary" @click="queryPage" style="margin-left: 10px;">查询</Button>
          <Button type="warning" @click="downloadCreditExcel" style="margin-left: 10px;">excel下载</Button>
          <Button type="error" @click="getTask" style="margin-left: 10px;">取件</Button>
          <!--<Button type="warning" @click="quickAddPage" style="margin-left: 10px;">快加查询清单</Button>-->
        </Form>
      </Row>

      <Table stripe border :columns="columns1" :data="data1" style="margin-top: 10px;"></Table>

      <div class="page-box">
        <Page :total="totalNumber" size="small" :current="currentPage" :page-size="pageSize" show-total @on-change="pageIndexChange"></Page>
      </div>

      <Modal v-model="pdfModal" title="提示" @on-ok="exeObtainPdf" @on-cancel="cancelObtainPdf">
        <p>确定获取PDF?</p>
      </Modal>

      <!--<Modal v-model="chargeBackModal" @on-ok="exeChargeBack" @on-cancel="cancelChargeBack">-->
      <Modal width="760" height="1800" v-model="chargeBackModal">
        <p slot="header" style="color:#f60;text-align:center">
          <Icon type="information-circled"></Icon>
          <span>退回说明</span>
        </p>
        <form id="chargeForm">
          <table cellspacing="0" border="1" bordercolor="#000000" style="border:darkgrey;margin-left: 2%; margin-right: 2%;">
            <tr>
              <td style="text-align: -webkit-center;">
                退回原因
              </td>
              <td>
                <CheckboxGroup v-model="chargebackRes" style="margin-left: 30px;">
                  <Checkbox label="A">
                    <span>身份证资料瑕疵</span>
                  </Checkbox>
                  <Checkbox label="B" style="margin-left: 25px;">
                    <span>保单资料瑕疵</span>
                  </Checkbox>
                  <br />
                  <Checkbox label="C">
                    <span>手持身份证照片瑕疵</span>
                  </Checkbox>
                  <Checkbox label="D">
                    <span>征信报告资料瑕疵</span>
                  </Checkbox>
                  <br />
                  <Checkbox label="E">
                    <span>房贷资料瑕疵</span>
                  </Checkbox>
                  <Checkbox label="F" style="margin-left: 35px;">
                    <span>其他</span>
                  </Checkbox>
                </CheckboxGroup>
              </td>
            </tr>
            <tr>
              <td style="text-align: -webkit-center;">
                退单原因说明
              </td>
              <td>
                <textarea v-model="chargebackDesc" style="height:90%;" cols="100" rows="6" placeholder="请输入退单原因描述......."></textarea>
              </td>
            </tr>
          </table>
        </form>

        <div slot="footer">
          <Button type="error" size="large" @click="exeChargeBack">退回</Button>
          <Button type="primary" size="large" @click="resetForm('chargeForm')">重置</Button>
          <Button type="primary" size="large" @click="chargeBackModal=false">关闭</Button>
        </div>
      </Modal>
  </Card>
</template>

<script>
import marvelsTaskCount from '../../components/marvels-task-count.vue'

export default {
  components: {
    marvelsTaskCount
  },
  data () {
    return {
      ruleInline: {
        fundSource: [
          // { required: true, message: "资金源不能为空", trigger: "blur",type: 'string' }
        ]
        // contractAccount: [{ pattern: /^([1-9][0-9]*)$/,required: false, message: "请输入整数", trigger: "blur" }]
      },
      $ajax: null,
      taskNodes: ['woCreditLoadUp'],
      path: this.$route.path,

      pdfModal: false, // 获取pdf提示框

      chargeBackModal: false, // 退单提示框

      loanId: '',

      chargebackRes: [], // 退回原因

      chargebackDesc: '', // 退回原因描述

      totalNumber: 1, // 总记录数

      currentPage: 1, // 当前页码

      pageSize: 20, // 页大小

      custCardNo: null,
      channel: null,
      custName: null,
      startCreatedDate: null,
      endCreatedDate: null,
      formInline: {
        custCardNo: '',
        channel: '',
        custName: '',
        startCreatedDate: '',
        endCreatedDate: '',
        channelName: ''
      },
      columns1: [{
        align: 'center',
        type: 'index',
        width: 65,
        title: '序号'
      },
      {
        align: 'center',
        title: '客户姓名',
        key: 'custName',
        width: 100
      },
      {
        align: 'center',
        title: '进件号',
        key: 'loanId'
      },
      {
        align: 'center',
        title: '身份证号码',
        key: 'custCardNo'
      },
      {
        align: 'center',
        title: '产品名称',
        key: 'productName',
        width: 100
      },
      {
        align: 'center',
        title: '所属渠道',
        key: 'channelName',
        width: 100
      },
      {
        align: 'center',
        title: '客户经理',
        key: 'employeeName',
        width: 100
      },
      {
        title: '上报日期',
        key: 'createdDate',
        align: 'center',
        render: (h, params) => {
          var vm = this
          return h('div', [
            h('span', vm.$util.formatTime(params.row.createdDate))
          ])
        }
      },
      {
        align: 'center',
        title: '上传',
        key: 'action',
        width: 150,
        render: function (h, param) {
          var vm = this
          return h('div', {}, [
            h('Upload', {
              props: {
                action: vm.$appContext.marvels_core_approve + 'approve/credit/report/service/reportUpload?loanId=' + param.row.loanId,
                headers: {
                  'l-token': sessionStorage['l-token']
                },
                // 上传失败回调
                'on-error': function (err) {
                  vm.$Message.error('上传失败：' + err.data)
                },
                // 上传成功回调
                'on-success': function (response) {
                  // 执行上传成功后的逻辑
                  if (response.code === 'success') {
                    vm.$Message.success('上传成功')
                    vm.queryPage()
                  }
                },
                'format': ['pdf'],
                'on-format-error': function () {
                  vm.$Message.warning('请上传PDF格式的文档！')
                }
              }
            },
            [h('Button', {
              props: {
                icon: 'ios-cloud-upload'
              }
            }, '上传')]
            )
          ])
        }.bind(this)
      }
      ],
      data1: []
    }
  },

  methods: {
    pageIndexChange (pageIndex) {
      this.currentPage = pageIndex
      this.queryPage()
    },

    initPage () {
      this.queryPage()
    },

    queryPage () {
      const vm = this
      var params = {
        startCreatedDate: vm.formInline.startCreatedDate,
        endCreatedDate: vm.formInline.endCreatedDate,

        pageNum: vm.currentPage,
        pageSize: vm.pageSize,
        // curNodeCode: 'woCreditLoadUp', //页面上写死的
        curNodeCodes: ['woCreditLoadUp'],
        custCardNo: vm.formInline.custCardNo,
        channelName: vm.formInline.channelName,
        custName: vm.formInline.custName
      }
      vm.$ajax.post(vm.$appContext.marvels_core_approve + '/approve/credit/report/service/list', params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          vm.$Message.warning(message)
          return
        }
        vm.data1 = re.data.data.list
        vm.totalNumber = re.data.data.total
      }).catch(er => {

      })
    },
    // 弹出获取pdf提示框
    obtainPdf (param) {
      var vm = this
      vm.pdfModal = true
      vm.loanId = param.loanId
      vm.custName = param.custName
      vm.custCardNo = param.custCardNo
    },
    // 弹出退回前端提示框
    chargeBackFont (loanId) {
      var vm = this
      vm.chargeBackModal = true
      // 重新弹出form表单需重置
      vm.chargebackRes = []
      vm.chargebackDesc = ''
      vm.loanId = loanId
    },
    // 执行获取当前单号征信报告pdf的操作
    exeObtainPdf () {
      var vm = this
      var params = { loanId: this.loanId, custName: this.custName, custCardNo: this.custCardNo }
      vm.$ajax.post(vm.$appContext.marvels_core_approve + '/approve/credit/report/service/getPdf', params).then(re => {
        var data = re.data
        var code = data.code
        if (code !== 'success') {
          vm.$Message.warning('获取失败')
        } else {
          vm.$Message.success('成功获取征信报告')
        }
      }).catch(er => {

      })
    },
    // 取消获取pdf
    cancelObtainPdf () {
      var vm = this
      this.$Message.info(vm.loanId + '成功取消获取征信报告')
    },
    // 执行退单
    exeChargeBack () {
      var vm = this
      if (vm.chargebackRes.length < 1) {
        alert('请至少选择一个退回原因')
        return
      }
      var params = {
        loanId: vm.loanId,
        backReason: vm.chargebackDesc,
        backReasonCodes: vm.chargebackRes.toString()
      }

      // 执行退单操作
      vm.$ajax.post(vm.$appContext.marvels_core_approve + '/approve/credit/report/service/chargeBack', params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code === 'success') {
          vm.$Message.success('退单成功!')
        } else {
          vm.$Message.success(message)
        }
      }).catch(er => {

      })

      // this.$Message.info(vm.loanId + '退单成功');
    },
    // 导出excel
    downloadCreditExcel () {
      const vm = this
      document.getElementById('exportCreditExcel').action = vm.$appContext.marvels_core_approve + 'approve/credit/report/service/downloadCreditExcel'
      document.getElementById('exportCreditExcel').submit()
    },
    // 重置退回表单
    resetForm (formId) {
      var vm = this
      vm.chargebackRes = [] // 退回原因
      vm.chargebackDesc = ''
      document.getElementById(formId).reset()
    },

    getTask () {
      const vm = this
      var params = {
        nodeCode: sessionStorage.nodeCode,
        groupCode: sessionStorage.groupCode,
        curNodeCode: 'woCreditLoadUp' // 页面上写死的
      }
      vm.$ajax.post(vm.$appContext.marvels_core_approve + '/approve/credit/report/service/getTask', params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code === 'success') {
          this.$Message.success('取件成功!')
          vm.queryPage()
        } else {
          vm.$Message.warning(message)
        }
      }).catch(er => {

      })
    },
    // 跳转到快加查询页面
    quickAddPage () {
      var vm = this
      vm.$router.push({
        name: 'quickAddQuery'
      })
    }

  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.initPage()
  }
}
</script>

<style lang="less">
@import '../../../styles/common.less';
@import '../../../styles/table.less';
</style>
